// 回收站

import React, { useState, useEffect } from 'react';
import { List, Typography, Dropdown, Menu, Button, Progress, Modal, message } from 'antd';
import { MoreOutlined, DeleteOutlined } from '@ant-design/icons';
import styles from './recycleBin.module.less';

const { Text, Title } = Typography;
const { confirm } = Modal;

const RecycleBin = () => {
  const [files, setFiles] = useState([]);
  const [loading, setLoading] = useState(false);
  const [totalSize, setTotalSize] = useState('12.5 GB');
  const [usagePercent, setUsagePercent] = useState(40);

  // 获取回收站文件列表
  const fetchFiles = async () => {
    setLoading(true);
    try {
      const mockFiles = [
        {
          id: 3,
          name: '文件名3.xd',
          size: '900 MB',
          updateTime: '2023.11.17 11:11',
          type: 'xd',
          icon: '/icons/xd.png'
        },
        {
          id: 4,
          name: '文件名4.fig',
          size: '2 GB',
          updateTime: '2023.11.17 11:11',
          type: 'figma',
          icon: '/icons/figma.png'
        },
        {
          id: 5,
          name: '文件名5.sketch',
          size: '20 MB',
          updateTime: '2023.11.17 11:11',
          type: 'sketch',
          icon: '/icons/sketch.png'
        },
        {
          id: 6,
          name: '文件名6.pdf',
          size: '20 MB',
          updateTime: '2023.11.17 11:11',
          type: 'pdf',
          icon: '/icons/pdf.png'
        },
        // ... 其他文件
      ];
      setFiles(mockFiles);
      
      // 计算总大小和使用百分比
      calculateUsage(mockFiles);
    } catch (error) {
      console.error('获取回收站文件失败:', error);
      message.error('获取回收站文件失败');
    }
    setLoading(false);
  };

  // 计算使用量
  const calculateUsage = (fileList) => {
    // 这里可以根据实际需求计算总大小和使用百分比
    const total = fileList.reduce((acc, file) => {
      const size = parseFloat(file.size);
      const unit = file.size.split(' ')[1];
      return acc + (unit === 'GB' ? size * 1024 : size);
    }, 0);
    
    setTotalSize(`${(total / 1024).toFixed(1)} GB`);
    setUsagePercent(Math.round((total / (30 * 1024)) * 100)); // 假设总容量为30GB
  };

  useEffect(() => {
    fetchFiles();
  }, []);

  // 还原文件
  const handleRestore = async (file) => {
    try {
      // 调用还原API
      // await restoreFile(file.id);
      
      // 模拟API调用
      setFiles(prev => prev.filter(f => f.id !== file.id));
      message.success('文件已还原');
      
      // 重新计算使用量
      calculateUsage(files.filter(f => f.id !== file.id));
    } catch (error) {
      message.error('还原文件失败');
    }
  };

  // 彻底删除文件
  const handleDelete = (file) => {
    confirm({
      title: '确认删除',
      content: '此操作将永久删除该文件，是否继续？',
      okText: '确认',
      cancelText: '取消',
      onOk: async () => {
        try {
          // 调用删除API
          // await deleteFile(file.id);
          
          // 模拟API调用
          setFiles(prev => prev.filter(f => f.id !== file.id));
          message.success('文件已删除');
          
          // 重新计算使用量
          calculateUsage(files.filter(f => f.id !== file.id));
        } catch (error) {
          message.error('删除文件失败');
        }
      }
    });
  };

  // 清空回收站
  const handleClearAll = () => {
    confirm({
      title: '清空回收站',
      content: '确定要清空回收站吗？此操作不可恢复。',
      okText: '确认',
      cancelText: '取消',
      onOk: async () => {
        try {
          // 调用清空API
          // await clearRecycleBin();
          
          // 模拟API调用
          setFiles([]);
          setTotalSize('0 GB');
          setUsagePercent(0);
          message.success('回收站已清空');
        } catch (error) {
          message.error('清空回收站失败');
        }
      }
    });
  };

  // 文件操作菜单
  const actionMenu = (file) => (
    <Menu>
      <Menu.Item key="restore" onClick={() => handleRestore(file)}>
        还原
      </Menu.Item>
      <Menu.Item key="delete" danger onClick={() => handleDelete(file)}>
        彻底删除
      </Menu.Item>
    </Menu>
  );

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <Title level={4}>回收站</Title>
      </div>

      <div className={styles.recycleCard}>
        <div className={styles.recycleInfo}>
          <div className={styles.progressWrapper}>
            <Progress 
              type="circle" 
              percent={usagePercent} 
              strokeColor="#fff"
              trailColor="rgba(255, 255, 255, 0.3)"
              strokeWidth={10}
            />
          </div>
          <div className={styles.recycleText}>
            <div className={styles.iconWrapper}>
              <DeleteOutlined className={styles.recycleIcon} />
              <Text>回收站</Text>
            </div>
            <Text>{totalSize}</Text>
          </div>
        </div>
        <Button 
          className={styles.clearBtn} 
          onClick={handleClearAll}
          disabled={files.length === 0}
        >
          清空回收站
        </Button>
      </div>

      <List
        grid={{ gutter: 16, column: 4 }}
        dataSource={files}
        loading={loading}
        className={styles.fileList}
        renderItem={file => (
          <List.Item className={styles.fileItem}>
            <div className={styles.fileCard}>
              <img src={file.icon} alt={file.type} className={styles.fileIcon} />
              <div className={styles.fileInfo}>
                <Text className={styles.fileName}>{file.name}</Text>
                <Text type="secondary" className={styles.fileDate}>{file.updateTime}</Text>
                <Text type="secondary" className={styles.fileSize}>{file.size}</Text>
              </div>
              <Dropdown 
                overlay={() => actionMenu(file)} 
                placement="bottomRight" 
                trigger={['click']}
              >
                <MoreOutlined className={styles.moreAction} />
              </Dropdown>
            </div>
          </List.Item>
        )}
      />
    </div>
  );
};

export default RecycleBin;


